<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title>淘淘游-换城</title>
		<script src="js/mui.min.js"></script>
		<link href="css/mui.min.css" rel="stylesheet" />
		<style>
			.mui-content {
				background-image: #fff url(images/gift.png) no-repeat;
				background-size: contain;
			}
			
			.mui-content .mui-title {
				position: relative;
				background-color: #fff;
			}
			
			.mui-slider-indicator {
				bottom: 0px;
			}
			
			.mui-city-change {
				margin-bottom: 5px;
				background-color: #fff;
				padding: 10px 0px;
			}
			
			.mui-city-change h1 {
				background-color: #00B281;
				position: relative;
				width: 40%;
				height: 40px;
				line-height: 40px;
				margin: 0 auto;
				text-align: center;
				color: #fff;
				font-size: 16px;
				border: 1px dashed #fff;
			}
			
			.mui-voucher-title:after,
			.mui-voucher-title:before {
				background-color: #fff;
				position: absolute;
				content: " ";
				width: 14px;
				height: 14px;
				border-radius: 50%;
				top: 12px;
			}
			
			.mui-voucher-title:after {
				left: 5px;
			}
			
			.mui-voucher-title:before {
				right: 5px;
			}
			
			.mui-pet-title:after,
			.mui-pet-title:before {
				background-color: #00B281;
				position: absolute;
				content: " ";
				border: 6px dotted #fff;
				width: 10px;
				height: 10px;
				border-radius: 50%;
				top: 8px;
			}
			
			.mui-pet-title:after {
				left: 5px;
			}
			
			.mui-pet-title:before {
				right: 5px;
			}
			
			.mui-change-list {
				list-style: none;
				padding: 0px 15px;
			}
			
			.mui-change-list li {
				clear: both;
				margin: 15px 0px;
				overflow: hidden;
			}
			
			.mui-change-left {
				float: left;
				width: 40%;
			}
			
			.mui-change-right {
				float: right;
				width: 40%;
				text-align: right;
			}
			
			.mui-change-left p,
			.mui-change-right p {
				background-color: #fff;
				border: 1px solid #DEEFEA;
				color: #00B281;
				font-size: 16px;
				text-align: center;
				line-height: 40px;
				margin: 0;
			}
			
			p em {
				font-weight: bold;
				font-size: 18px;
			}
			
			.mui-change-right img {
				width: 100px;
				height: auto;
			}
			
			.mui-pet-show .mui-table-view {
				background-color: #fff;
			}
			
			.mui-grid-view.mui-grid-9 .mui-table-view-cell {
				border: none;
				padding: 0;
			}
			
			.mui-slider .mui-slider-group .mui-slider-item .mui-pet-info img {
				width: 60px;
			}
			
			.change-btn {
				display: block;
				width: 40px;
				height: 40px;
				line-height: 40px;
				border-radius: 50%;
				border: 1px solid #00B281;
				margin: 0 auto;
				color: #00B281;
				text-align: center;
			}
			
			.mui-pet-show .mui-icon .mui-badge {
				font-family: "microsoft yahei";
				background-color: rgba(0, 0, 0, .15);
				color: #000;
			}
		</style>
	</head>

	<body>
		<!--单页面开始-->
		<div id="city" class="mui-page">
			<!--页面标题栏开始-->
			<div class="mui-navbar-inner mui-bar mui-bar-nav">
				<button type="button" class="mui-left mui-action-back mui-btn  mui-btn-link mui-btn-nav mui-pull-left">
					<span class="mui-icon mui-icon-left-nav"></span>
				</button>
				<h1 class="mui-center mui-title">换城</h1>
			</div>
			<div class="mui-content">
				<div class="mui-voucher mui-city-change">
					<h1 class="mui-voucher-title">代金券</h1>
					<!--<ul class="mui-voucher-list mui-change-list">
						<li>
							<div class="mui-change-left">
								<p>￥<em>2</em> 代金券</p>
							</div>
							<div class="mui-change-right"><img src="images/pet/pet6.jpg" /></div>
						</li>
						<li>
							<div class="mui-change-left">
								<p>￥<em>4</em> 代金券</p>
							</div>
							<div class="mui-change-right"><img src="images/pet/pet8.jpg" /></div>
						</li>
						<li>
							<div class="mui-change-left">
								<p>￥<em>6</em> 代金券</p>
							</div>
							<div class="mui-change-right"><img src="images/pet/pet3.jpg" /></div>
						</li>
						<li>
							<div class="mui-change-left">
								<p>￥<em>8</em> 代金券</p>
							</div>
							<div class="mui-change-right"><img src="images/pet/pet4.jpg" /></div>
						</li>
						<li>
							<div class="mui-change-left">
								<p>￥<em>10</em> 代金券</p>
							</div>
							<div class="mui-change-right"><img src="images/pet/pet5.png" /></div>
						</li>
					</ul>-->
					<ul class="mui-voucher-list mui-change-list">
						<li>
							<div class="mui-change-left">
								<p>￥<em>2</em> 代金券</p>
							</div>
							<div class="mui-change-right">
								<p><em>1</em> 级宠物</p>
							</div>
						</li>
						<li>
							<div class="mui-change-left">
								<p>￥<em>4</em> 代金券</p>
							</div>
							<div class="mui-change-right">
								<p><em>2</em> 级宠物</p>
							</div>
						</li>
						<li>
							<div class="mui-change-left">
								<p>￥<em>6</em> 代金券</p>
							</div>
							<div class="mui-change-right">
								<p><em>3</em> 级宠物</p>
							</div>
						</li>
						<li>
							<div class="mui-change-left">
								<p>￥<em>8</em> 代金券</p>
							</div>
							<div class="mui-change-right">
								<p><em>4</em> 级宠物</p>
							</div>
						</li>
						<li>
							<div class="mui-change-left">
								<p>￥<em>10</em> 代金券</p>
							</div>
							<div class="mui-change-right">
								<p><em>5</em> 级宠物</p>
							</div>
						</li>
					</ul>
					<a id="change-voucher" class="change-btn"><span class="mui-icon mui-icon-loop"></span></a>
				</div>
				<div class="mui-pet mui-city-change">
					<h1 class="mui-pet-title">宠物公仔</h1>
					<ul class="mui-pet-list mui-change-list">
						<li>
							<div class="mui-change-left">
								<p><em>1</em> 级宠物 <span class="mui-badge">1</span>
									<x></x>
								</p>
							</div>
							<div class="mui-change-right"><img src="images/pet/pet6.jpg" /></div>
						</li>
						<li>
							<div class="mui-change-left">
								<p><em>2</em> 级宠物 <span class="mui-badge">2</span></p>
							</div>
							<div class="mui-change-right"><img src="images/pet/pet4.jpg" /></div>
						</li>
						<li>
							<div class="mui-change-left">
								<p><em>3</em> 级宠物 <span class="mui-badge">3</span></p>
							</div>
							<div class="mui-change-right"><img src="images/pet/pet8.jpg" /></div>
						</li>
						<li>
							<div class="mui-change-left">
								<p><em>4</em> 级宠物 <span class="mui-badge">4</span></p>
							</div>
							<div class="mui-change-right"><img src="images/pet/pet6.jpg" /></div>
						</li>
						<li>
							<div class="mui-change-left">
								<p><em>5</em> 级宠物 <span class="mui-badge">5</span></p>
							</div>
							<div class="mui-change-right"><img src="images/pet/pet8.jpg" /></div>
						</li>
					</ul>
					<a id="change-pet" class="change-btn"><span class="mui-icon mui-icon-loop"></span></a>
				</div>

				<div class="mui-pet-show mui-city-change">
					<h1 class="mui-pet-title">宠物架子</h1>
					<div class="mui-slider">
						<div class="mui-slider-group">
							<div class="mui-slider-item">
								<ul class="mui-table-view mui-grid-view mui-grid-9">
									<li class="mui-table-view-cell mui-media mui-col-xs-4">
										<a href="#">
											<span class="mui-icon mui-icon-flag"><span class="mui-badge">1</span></span>
											<div class="mui-media-body">
												一级宠物
											</div>
										</a>
									</li>
									<li class="mui-table-view-cell mui-media mui-col-xs-4">
										<a href="#">
											<div class="mui-pet-info"><img src="images/pet/pet1.png" /></div>
											<div class="mui-media-body">
												大白
											</div>
										</a>
									</li>
								</ul>
							</div>
						</div>
					</div>

					<div class="mui-slider">
						<div class="mui-slider-group">
							<div class="mui-slider-item">
								<ul class="mui-table-view mui-grid-view mui-grid-9">
									<li class="mui-table-view-cell mui-media mui-col-xs-4">
										<a href="#">
											<span class="mui-icon mui-icon-flag"><span class="mui-badge">2</span></span>
											<div class="mui-media-body">
												二级宠物
											</div>
										</a>
									</li>
									<li class="mui-table-view-cell mui-media mui-col-xs-4">
										<a href="#">
											<div class="mui-pet-info"><img src="images/pet/pet2.jpg" /></div>
											<div class="mui-media-body">
												宠物
											</div>
										</a>
									</li>
									<li class="mui-table-view-cell mui-media mui-col-xs-4">
										<a href="#">
											<div class="mui-pet-info"><img src="images/pet/pet2.jpg" /></div>
											<div class="mui-media-body">
												宠物
											</div>
										</a>
									</li>
								</ul>
							</div>
						</div>
					</div>

					<div class="mui-slider">
						<div class="mui-slider-group">
							<div class="mui-slider-item">
								<ul class="mui-table-view mui-grid-view mui-grid-9">
									<li class="mui-table-view-cell mui-media mui-col-xs-4">
										<a href="#">
											<span class="mui-icon mui-icon-flag"><span class="mui-badge">4</span></span>
											<div class="mui-media-body">
												三级宠物
											</div>
										</a>
									</li>
									<li class="mui-table-view-cell mui-media mui-col-xs-4">
										<a href="#">
											<div class="mui-pet-info"><img src="images/pet/pet7.jpg" /></div>
											<div class="mui-media-body">
												宠物
											</div>
										</a>
									</li>
									<li class="mui-table-view-cell mui-media mui-col-xs-4">
										<a href="#">
											<div class="mui-pet-info"><img src="images/pet/pet7.jpg" /></div>
											<div class="mui-media-body">
												宠物
											</div>
										</a>
									</li>
								</ul>
							</div>
							<div class="mui-slider-item">
								<ul class="mui-table-view mui-grid-view mui-grid-9">
									<li class="mui-table-view-cell mui-media mui-col-xs-4">
										<a href="#">
											<div class="mui-pet-info"><img src="images/pet/pet7.jpg" /></div>
											<div class="mui-media-body">
												宠物
											</div>
										</a>
									</li>
									<li class="mui-table-view-cell mui-media mui-col-xs-4">
										<a href="#">
											<div class="mui-pet-info"><img src="images/pet/pet7.jpg" /></div>
											<div class="mui-media-body">
												宠物
											</div>
										</a>
									</li>
								</ul>
							</div>
						</div>
					</div>

					<div class="mui-slider">
						<div class="mui-slider-group">
							<div class="mui-slider-item">
								<ul class="mui-table-view mui-grid-view mui-grid-9">
									<li class="mui-table-view-cell mui-media mui-col-xs-4">
										<a href="#">
											<span class="mui-icon mui-icon-flag"><span class="mui-badge">4</span></span>
											<div class="mui-media-body">
												四级宠物
											</div>
										</a>
									</li>
									<li class="mui-table-view-cell mui-media mui-col-xs-4">
										<a href="#">
											<div class="mui-pet-info"><img src="images/pet/pet6.jpg" /></div>
											<div class="mui-media-body">
												宠物
											</div>
										</a>
									</li>
									<li class="mui-table-view-cell mui-media mui-col-xs-4">
										<a href="#">
											<div class="mui-pet-info"><img src="images/pet/pet6.jpg" /></div>
											<div class="mui-media-body">
												宠物
											</div>
										</a>
									</li>
								</ul>
							</div>
							<div class="mui-slider-item">
								<ul class="mui-table-view mui-grid-view mui-grid-9">
									<li class="mui-table-view-cell mui-media mui-col-xs-4">
										<a href="#">
											<div class="mui-pet-info"><img src="images/pet/pet6.jpg" /></div>
											<div class="mui-media-body">
												宠物
											</div>
										</a>
									</li>
									<li class="mui-table-view-cell mui-media mui-col-xs-4">
										<a href="#">
											<div class="mui-pet-info"><img src="images/pet/pet6.jpg" /></div>
											<div class="mui-media-body">
												宠物
											</div>
										</a>
									</li>
								</ul>
							</div>
						</div>
					</div>

					<div class="mui-slider">
						<div class="mui-slider-group">
							<div class="mui-slider-item">
								<ul class="mui-table-view mui-grid-view mui-grid-9">
									<li class="mui-table-view-cell mui-media mui-col-xs-4">
										<a href="#">
											<span class="mui-icon mui-icon-flag"><span class="mui-badge">4</span></span>
											<div class="mui-media-body">
												五级宠物
											</div>
										</a>
									</li>
									<li class="mui-table-view-cell mui-media mui-col-xs-4">
										<a href="#">
											<div class="mui-pet-info"><img src="images/pet/pet5.png" /></div>
											<div class="mui-media-body">
												宠物
											</div>
										</a>
									</li>
									<li class="mui-table-view-cell mui-media mui-col-xs-4">
										<a href="#">
											<div class="mui-pet-info"><img src="images/pet/pet5.png" /></div>
											<div class="mui-media-body">
												宠物
											</div>
										</a>
									</li>
								</ul>
							</div>
							<div class="mui-slider-item">
								<ul class="mui-table-view mui-grid-view mui-grid-9">
									<li class="mui-table-view-cell mui-media mui-col-xs-4">
										<a href="#">
											<div class="mui-pet-info"><img src="images/pet/pet5.png" /></div>
											<div class="mui-media-body">
												宠物
											</div>
										</a>
									</li>
									<li class="mui-table-view-cell mui-media mui-col-xs-4">
										<a href="#">
											<div class="mui-pet-info"><img src="images/pet/pet5.png" /></div>
											<div class="mui-media-body">
												宠物
											</div>
										</a>
									</li>
								</ul>
							</div>
						</div>
					</div>

				</div>

			</div>

		</div>
		<script type="text/javascript" charset="UTF-8">
			(function($, doc) {
				mui.init();
			})(mui, document);
		</script>
	</body>

</html>